<script lang="ts" setup>
  import * as echarts from "echarts";
  import { onMounted, ref } from "vue";

  const chinaMapRef = ref(null);

  function initChart() {
    if (chinaMapRef.value) {
      const chart = echarts.init(chinaMapRef.value);
      fetch("https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json")
        .then((response) => response.json())
        .then((json) => {
          echarts.registerMap("china", json);
          chart.setOption({
            width: "500px",
            geo: [
              {
                map: "china",
                itemStyle: { areaColor: "#034778" },
              },
              {
                map: "china",
                zlevel: -1,
                itemStyle: {
                  shadowColor: "rgba(172,122,255,0.5)",
                  shadowOffsetY: 5,
                },
              },
            ],
            series: [
              {
                type: "map",
                map: "china",
                label: { show: false },
              },
            ],
          });
        });
    }
  }

  onMounted(() => {
    initChart();
  });
</script>

<template>
  <div class="header">
    <div class="title">小蓝科创总部大屏</div>
  </div>
  <umrp-container padding="10px">
    <umrp-row>
      <umrp-col :span="6">
        <umrp-container bg-color="#f2f2f2" padding="16px" :gap="24" style="border-radius: 8px">
          <umrp-text align="center" :size="16" bold>数据更新时间：2025.06.15</umrp-text>
          <umrp-text align="center" :size="12">(2025年会员卡持有人数)</umrp-text>
          <umrp-row>
            <umrp-col :span="8">
              <umrp-container :gap="10" align="center">
                <umrp-text bold>尊贵卡</umrp-text>
                <umrp-text>325035人</umrp-text>
              </umrp-container>
            </umrp-col>
            <umrp-col :span="8">
              <umrp-container :gap="10" align="center">
                <umrp-text bold>金卡</umrp-text>
                <umrp-text>325035人</umrp-text>
              </umrp-container>
            </umrp-col>
            <umrp-col :span="8">
              <umrp-container :gap="10" align="center">
                <umrp-text bold>银卡</umrp-text>
                <umrp-text>325035人</umrp-text>
              </umrp-container>
            </umrp-col>
          </umrp-row>
        </umrp-container>
      </umrp-col>
      <umrp-col :span="12">
        <div ref="chinaMapRef" style="width: 800px; height: 600px"></div>
      </umrp-col>
      <umrp-col :span="6">3</umrp-col>
    </umrp-row>
  </umrp-container>
</template>

<style lang="scss" scoped>
  .header {
    display: flex;
    justify-content: center;
    padding: 16px 0;

    .title {
      font-size: 24px;
      font-weight: bold;
    }
  }
</style>
